<template>
<!-- 	<view class="filtrate-box" :style="{backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}"
		v-if="filtrateShow">
		<view class="aside">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="dropdown-item" v-for="(item,index) in filtrateArr" :key="index"
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+4+'rpx','color':(currentFiltrateAsideIndex==index)?activeColor:itemTextColor}"
					@tap.stop="currentFiltrateAsideIndex=index">{{item.type}}</view>
			</scroll-view>
		</view>

		<view class="conter">
			<scroll-view scroll-y="true" style="height: 100%;" :scroll-top="scrollTop">
				<view class="conter-title"
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+4+'rpx'}">
					
				</view>
				<view style="height: 120rpx;"></view>
				<view :class="['dropdown-item',currentFiltrateConterIndex==index?'on':'']"
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+'rpx','color':(currentFiltrateConterIndex==index)?activeColor:itemTextColor}"
					v-for="(item,index) in firstList" :key="item.id" @tap.stop="handleCityChange(item,index)">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		<view class="conter" style="left: 300rpx;">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="conter-title"
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+4+'rpx'}">
					
				</view>
				<view style="height: 120rpx;"></view>
				<view :class="['dropdown-item',selectedIds.indexOf(item.id) != -1 ?'on':'']"
					:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+'rpx','color':(selectedIds.indexOf(item.id) != -1)?activeColor:itemTextColor}"
					v-for="(item,index) in secondList" :key="item.id" @tap.stop="handleDistrictChange(item)">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		<view class="acea-row row-middle row-between filtrate-btn">
			<view class="reset" @tap.top="filtrateReset()">重置</view>
			<view class="confirm" @tap.top="filtrateConfirm()">确认</view>	
		</view>
	</view> -->
	<view >
		<tkiTree ref="tree" :range="firstList" :selectParent="selectParent" titleColor="#ee212d" :rangeKey="rangeKey" confirmColor="#ee212d" @confirm="treeConfirm" :multiple="multiple" @cancel="filtrateShow=false"/>
	</view>
	
</template>

<script>
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	import {
		getCityApi
	} from "@/api/api.js";
	import {
		classificationList
	} from "@/api/subletOfShop.js";
	export default {
		components:{
			tkiTree
		},
		props: {
			filtrateArr: {
				type: Array,
				default: () => [{
						type: '经营',
						list: ['1号线', '2号线']
					}],
			},
			multiple:{
				type:Boolean,
				default:true
			},
			selectParent: { //是否可以选父级
				type: Boolean,
				default: false
			},
		},
		watch: {
			filtrateArr: {
				handler(newVal, oldVal) {
					this.goInitArea();
				},
				deep: true,
				immediate: true
			},
			filtrateShow(val){
				if(val){
					this.$refs.tree._show();
				}
				
			}
		},
		data() {
			return {
				itemPadding: 24,
				itemFontSize: 28,
				itemHeight: 88,
				itemTextColor: '#666',
				activeColor: '#ee212d',
				show: true,
				filtrateShow: false,
				currentFiltrateAsideIndex: 0,
				currentFiltrateConterIndex: 0,
				bgcolor: '#fff',
				firstList: [],
				secondList: [],
				scrollTop: 0,
				selectedIds: [], //已选id
				selectedNames: [], //已选id对应名称
				rangeKey:'name'
			}
		},
		methods: {
			async goInitArea() {
				try {
					uni.showLoading({
						title: '加载中'
					})
					let {
						data
					} = await classificationList();
					uni.hideLoading();
					this.firstList = data;
					this.secondList = data[0].children;
				} catch (e) {
				
					//TODO handle the exception
				} finally {}
			},
			//点击城市时
			// handleCityChange(item, index) {
			// 	this.currentFiltrateConterIndex = index;
			// 	this.scrollTop = 57 * index
			// 	this.secondList = item.children;
			// },
			// //点击区县
			// handleDistrictChange(item) {
			// 	if (this.selectedIds.indexOf(item.id) != -1) {
			// 		const ind = this.selectedIds.indexOf(item.id)
			// 		this.selectedIds.splice(ind, 1);
			// 		this.selectedNames.splice(ind, 1);
			// 	} else {
			// 		this.selectedIds.push(item.id)
			// 		this.selectedNames.push(item.name)
			// 	}
			// },
			//点击重置
			// filtrateReset() {
			// 	this.selectedIds = [];
			// 	this.goInitArea()
			// },
			// //点击确认
			// filtrateConfirm() {
			// 	this.$emit('confrim', {
			// 		selectedIds: this.selectedIds.join(','),
			// 		name: this.selectedNames.join(',')
			// 	});
			// 	this.filtrateShow = false
			// },
			filtrateConfirm(data) {
				this.$emit('confrim', {
					selectedIds: data.ids.join(','),
					name: data.names.join(',')
				});
				this.filtrateShow = false
			},
			treeConfirm(data){
				
				let ids = [];
				let names = [];
				data.forEach(item=>{
					ids.push(item.id);
					names.push(item.name);
				})
				this.filtrateConfirm({
					ids,names
				})
			},
			

		},
		mounted(){
			
		}
	}
</script>

<style>
	/* 筛选 */
	.filtrate-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #ffffff;
		z-index: 1999;
	}
	
	.filtrate-box .aside {
		padding-top: 24rpx;
		position: absolute;
		left: 0;
		top: 0;
		width: 150rpx;
		height: calc(100% - 100rpx);
		left: 0;
		bottom: 100rpx;
		background: #F8F8F8;
		/* background-color: #f7f7f7;
		overflow-y: auto;
		overflow-x: hidden; */
	}
	
	.filtrate-box .aside .dropdown-item {
		height: 88rpx;
		padding-left: 24rpx;
		font-size: 28rpx;
		background-color: #ffffff;
		margin-bottom: 12rpx;
		max-width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	
	.filtrate-box .conter {
		height: calc(100% - 100rpx);
		width: 300rpx;
		position: absolute;
		margin: 0rpx 0 0 150rpx;
		padding: 24rpx 14rpx;
	}
	
	
	.filtrate-box .conter .dropdown-item {
		margin: auto;
		width: 90%;
		background-color: #f6f6f6;
		margin-bottom: 18rpx;
		border-radius: 4rpx;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: wrap;
	
	}
	
	.filtrate-box .conter .dropdown-item:nth-child(2n) {
		margin-right: 18rpx;
	}
	
	.filtrate-box .conter .conter-title {
		font-size: 32rpx;
		font-weight: 400;
		text-align: center;
		color: rgba(0, 0, 0, 1);
		width: 272rpx;
		height: 100rpx;
		position: fixed;
		background-color: #ffffff;
	}
	
	.filtrate-box .conter .dropdown-item.on {
		background: rgba(255, 247, 248, 1);
		color: rgba(238, 33, 45, 1);
	}
	
	.filtrate-box .filtrate-btn {
		width: 100%;
		height: 100rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	
	.filtrate-box .filtrate-btn .reset {
		width: 35%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #4b4b4b;
		background: #F5F6FA;
	}
	
	.filtrate-box .filtrate-btn .confirm {
		width: 65%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #ffffff;
		background: #EE212D;
	}
</style>